<template>
 <Row>
        <Col span="5">
        <Tree :data="data1" @on-select-change="onSelectChange($event)"></Tree>
        </Col>
        <Col span="19">
         <Button type="primary" @click="modal1 = true">添加新闻</Button>
         <Modal
        v-model = "modal1"
        title   = "添加新闻"
        >
         <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" id="form">
    <!-- <Input v-model="formValidate._id" placeholder="id"></Input> -->
        <FormItem label="新闻作者" prop="name">
            <Input v-model="formValidate.name" placeholder="请输入新闻作者"></Input>
        </FormItem>
         <FormItem label="新闻标题" prop="title">
            <Input v-model="formValidate.title" placeholder="请输入新闻标题"></Input>
        </FormItem>

        <FormItem label="新闻内容" prop="content">
            <Input v-model="formValidate.content" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="新闻内容"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">确定</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button>
        </FormItem>
    </Form>

    </Modal>
         <Button type="primary"  @click="deletes">删除选中新闻</Button>
         <Input search placeholder="输入新闻标题搜索" style="width: auto" @on-search="seek">
            <Icon type="ios-search" slot="suffix" />
        </Input>
        <Table border :columns="columns7" :data="data6" @on-select="removes"></Table>
        </Col>
    </Row>

</template>
<script>
    let moment = require("moment");
    export default {
        data () {
            return {
                formValidate: {
                    name        : '',
                    title       : '',
                    time        : '',
                    content     : '',
                    _id         : '',
                    cateId      : '',
                },
                value       : [],
                ruleValidate: {
                    name: [
                        { required: true, message: '请输入新闻作者', trigger: 'blur' }
                    ],
                    title: [
                        { required: true, message: '请输入新闻标题', trigger: 'blur' }
                    ],

                    desc: [
                        { required: true, message: '请输入新闻内容', trigger: 'blur' },
                        { type: 'string', min: 20, message: '不得小于20字', trigger: 'blur' }
                    ]
                },
                modal1  : false,
                data1   : [],
                columns7: [
                     {
                        type : 'selection',
                        width: 60,
                        align: 'center',
                    },
                    {
                        title : '新闻作者',
                        key   : 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '新闻标题',
                        key  : 'title'
                    },
                    {
                        title: '新闻评论',
                        key  : 'reply'
                    },
                    {
                        title: '发布时间',
                        key  : 'time'
                    },
                    {
                        title : '操作',
                        key   : 'action',
                        width : 200,
                        align : 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.axios({
                                                url   : `${config.dataBaseUrl}news/${params.row._id}`,
                                                method: 'get'
                                            }).then((res)=>{
                                                this.formValidate = res.data;
                                            })
                                            this.modal1 = true;
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                            title  : '确认对话框',
                                            content: '<p>你确认删除该条新闻吗？</p>',
                                            onOk   : () => {
                                                this.axios({
                                                url   : `${config.dataBaseUrl}news/${params.row._id}`,
                                                method: 'delete'
                                            }).then(()=>{
                                                this.getlist(this.formValidate.cateId)
                                            })
                                            },
                                            onCancel: () => {
                                                this.$Message.info('Clicked cancel');
                                            }
                                        });
                                        }
                                    }
                                }, '删除'),
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.$router.push({path: `/comment/${params.row._id}`});
                                        }
                                    },

                                }, '评论')
                            ]);
                        }
                    }
                ],
                data6: []
            }
        },
        methods: {
            onSelectChange(data){
                this.formValidate.cateId = "";
                this.formValidate.cateId = data[0]._id;
                this.axios({
                    url   : `${config.dataBaseUrl}news/list/${data[0]._id}`,
                    method: 'post'
                }).then(res=>{
                    this.data6 = res.data;
                })
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        console.log(this.$refs);
                        //this.formValidate._id=
                        this.formValidate.time = moment().format();
                        this.$Message.success('Success!');
                       if(this.formValidate._id==""){
                            if(this.formValidate.cateId==""){
                                this.formValidate.cateId = "5c22d6acfc805123d45246ec";
                            }
                         delete this.formValidate._id;
                        //  console.log(this.formValidate);
                        this.axios({
                            url   : `${config.dataBaseUrl}news`,
                            method: 'post',
                            data  : this.formValidate
                        }).then(()=>{
                            this.formValidate._id = '';
                            this.$refs.formValidate.resetFields();
                            this.getlist(this.formValidate.cateId);
                        })
                         this.ok ();
                       }else{
                        this.axios({
                            url   : `${config.dataBaseUrl}news/${this.formValidate._id}`,
                            method: 'put',
                            data  : this.formValidate
                        }).then(()=>{
                            this.formValidate._id = '';
                            this.$refs.formValidate.resetFields();
                            this.getlist(this.formValidate.cateId);
                        })
                         this.ok ();
                       }

                    } else {
                        this.$Message.error('Fail!');
                    }
                })

            },
            seek(value){
                this.axios({
                    url   : `${config.dataBaseUrl}news/title/${value}`,
                    method: 'post'
                }).then(res=>{
                    this.data6 = res.data;
                })
            },



            handleReset (name) {
                this.$refs[name].resetFields();
                this.cancel ()
            },
            ok () {
                this.$Message.info('Clicked ok');
                this.modal1 = false
            },
            cancel () {
                this.$Message.info('Clicked cancel');
                this.modal1 = false
            },
            removes(data){
                 //console.log(data[1]._id);
                this.value = [];
                for(var i=0;i<data.length;i++){
                    this.value.push(data[i]._id)
                }
            },
            deletes(){
                this.$Modal.confirm({
                        title  : '确认对话框',
                        content: '<p>你确认删除该条新闻吗？</p>',
                        onOk   : () => {
                            for(var i=0;i<this.value.length;i++){
                                    this.axios({
                                    url   : `${config.dataBaseUrl}news/${this.value[i]}`,
                                    method: 'delete'
                                }).then(()=>{
                                    this.getlist(this.formValidate.cateId)
                                })
                            }
                        },
                        onCancel: () => {
                            this.$Message.info('Clicked cancel');
                        }
                    });
            },
            getlist(value){
                if(value){
                    this.axios({
                                url   : `${config.dataBaseUrl}news/list/${value}`,
                                method: 'post'
                            }).then(res=>{
                                this.$refs.formValidate.resetFields();
                                this.data6 = res.data;
                            })
                }else{
                    this.axios({
                        url   : `${config.dataBaseUrl}news/list`,
                        method: 'post'
                    }).then(res=>{
                        this.data6 = res.data;
                    })
                }

            },
            getnewslist(){
                this.axios({
                    url   : `${config.dataBaseUrl}cate/list/news`,
                    method: 'post'
                }).then(res=>{
                    this.data1 = res.data;
                })
            }
            },
            mounted(){
                this.getlist();
                this.getnewslist();
            }
        }

</script>

<style>
    .ivu-modal-footer{
        display: none
    }
</style>